<template>
    <Layout :showHome="true" :showBtn="true" title="添加员工信息">
        <div class="content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="userName"
                        name="userName"
                        label="用户姓名："
                        placeholder="输入用户姓名"
                        :rules="[{ required: true, message: '请填写用户姓名' }]"
                    />
                    <van-field
                        v-model="passWord"
                        type="passWord"
                        name="passWord"
                        label="密码："
                        placeholder="请输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />               
                    <van-field 
                        v-model="sex"
                        name="sex"
                        label="选择性别"
                        is-link
                        readonly
                        @click="sexUnit = true" 
                    />
                    <van-field
                        v-model="phone"
                        type="phone"
                        name="phone"
                        label="电话："
                        placeholder="请输入电话"
                        :rules="[{ required: true, message: '请填写电话' }]"
                    /> 
                    <van-field
                        v-model="eml"
                        type="eml"
                        name="eml"
                        label="邮箱："
                    />
                    <van-field
                        v-model="userId"
                        type="userId"
                        name="userId"
                        label="用户编码："
                        :rules="[{ required: true, message: '请填写编码' }]"
                    /> 
                    <van-field 
                        v-model="dept"
                        name="dept"
                        label="选择部门"
                        is-link
                        readonly
                        @click="showUnit = true"
                        placeholder="所属部门："
                        :rules="[{ required: true, message: '请输入所属部门' }]"
                    /> 
                                                       
            </van-cell-group>
                <div style="margin: 16px;">
                    <van-button color="#3d3d3d" size="16px" round block type="primary" native-type="submit">
                    添加
                    </van-button>                    
                </div>
                <van-popup v-model:show="sexUnit" position="bottom">
                        <van-picker 
                            :columns="sexOptions"
                            @confirm="sexPickerEvt"
                            @click="sexUnit = false"/>
                </van-popup>

                <van-popup v-model:show="showUnit" position="bottom">
                        <van-picker 
                            :columns="deptOptions"
                            @confirm="deptPickerEvt"
                            @click="showUnit = false"/>
                </van-popup>
            </van-form>
        </div>
    </Layout>
</template>


<script setup>
    import { ref ,reactive, watch} from 'vue';
    import { Toast } from 'vant';
    import { deCodeApi } from '../../utils';
    import { userAddApi } from '../../apis/userAddApi'
    import { useRouter } from 'vue-router'
    
    let info =reactive({})
    info=JSON.parse(deCodeApi(sessionStorage.getItem('userInfo')))
    console.log(info)
    const router=useRouter()
    const userId=ref('')
    const userName=ref('')
    const passWord=ref('')
    const phone=ref('')
    const eml=ref('')
    const sex=ref('')
    const dept=ref('')
    // const userObj = reactive({
    //     userId:'',
    //     userName:'',
    //     passWord:'',
    //     phone:'',
    //     eml:'',
    //     sex:'',
    //     dept:'',
    // })
    const showUnit = ref(false)
    const sexUnit = ref(false)
    const sexOptions = ['男', '女']
    const deptOptions = ['财务部门', '人资部门','软件部门','开发部门']
   
    // console.log(userObj.userId.value)
    // watch(userId.value,function(newValue,oldValue){
    //     console.log(newValue,oldValue)
    // })
    
    function onSubmit(){
        // console.log(arguments);
            if (!/^1[3-9]{1}[0-9]{9}$/g.test(phone.value)) {
            Toast({
                message: '输入正确的手机号',
                position: 'bottom'
            })
            return
            }
            let res= userAddApi({
            id:userId.value,
            name:userName.value,
            password:passWord.value,
            phone:phone.value,
            email:eml.value,
            sex:sex.value,
            dept:dept.value
            }).then(d=>{
                if(d.code===200){
                    Toast.success('添加成功')
                    router.push('/home')
                }else{
                    Toast.fail(d.message +'-------添加失败')
                }
                
            })     
    }
    

    function sexPickerEvt(val) {
        sex.value = val
        showUnit.value = false
    }
    
    function deptPickerEvt(val) {
        dept.value = val
        showUnit.value = false
    }
</script>
<style lang="less" scoped>
.content {
    height: 100%;
    background: #f5f7fb;
    >header {
        height: 50px;
        background: #c40e19;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #ffb8ba;
        >.van-icon{
            float: left;
            line-height: 50px;
            margin-left: 10px;
         }
    }
    .van-form{
        padding: 20px 0;
    }
    
}
</style>